<!--
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
-->
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="jQuery/jquery-3.3.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.validate.js"></script>
    <script type="text/javascript">
        function upload() {
            $.ajax({
                type: "POST",
                url: "Login",
                data: $('#loginForm').serialize(),
                success: function (data) {
                    if (data === "false") {
                        alert("用户名或密码错误！请重新输入！");
                    } else if (data === "admin") {
                        document.location = "admin.jsp";
                    } else if (data === "true") {
                        window.location.href="my.jsp"
                    } else {
                    }
                }
            });
        }

        // 模态框登录注册切换
        $(function () {
            $('#myCarousel').carousel({
                interval: 1500
            });
            $("#loginC").click(function () {
                $("#register").hide(500);
                $("#login").show(500);
            });

            $("#registerC").click(function () {
                $("#login").hide(500);
                $("#register").show(500);
            });
        });
        //登录表单提交验证
        $(document).ready(function () {
            $("#loginForm").validate({
                rules: {
                    Uname: {
                        required: true,

                    },
                    passWord: {
                        required: true,

                    }
                },
                messages: {
                    Uname: {
                        required: "*"

                    },
                    passWord: {
                        required: "*"
                    }
                }
            })
        });
        //注册表单提交验证
        $(document).ready(function () {
            $("#addUserform").validate({
                rules: {
                    Uname: {
                        required: true
                    },
                    passWord: {
                        required: true
                    },
                    "passWord_again": {
                        equalTo: "#passWord"
                    },
                    idCard: {
                        required: true
                    },
                    phone: {
                        required: true
                    }
                },
                messages: {
                    Uname: {
                        required: "*"
                    },
                    passWord: {
                        required: "*"
                    },
                    "passWord_again": {
                        equalTo: "*"
                    },
                    idCard: {
                        required: "*"
                    },
                    phone: {
                        required: "*"
                    }
                }
            })
        });
        $(function () {
            $('.lunbotuul #li3').mouseover(function () {
                $('.erweima').addClass("erweimaclass");
            })
            $('.lunbotuul #li3').mouseout(function () {
                $('.erweima').removeClass("erweimaclass");
            })
        })
        $(function () {
            $('.lunbotuul #li2').mouseover(function () {
                $('.erweima1').addClass("erweimaclass1");
            })
            $('.lunbotuul #li2').mouseout(function () {
                $('.erweima1').removeClass("erweimaclass1");
            })
        })
    </script>
</head>
<body>
<div class="snow">
    <%--侧边栏效果开始--%>
    <div>
        <div class="erweima"><img src="images/left.png" height="150" width="332"/></div>
        <div class="erweima1"><img src="images/left2.png" height="130" width="300"/></div>
        <ul class="lunbotuul">

            <li id="li2"><a href=""><span class='span1 glyphicon glyphicon-phone-alt'></span><span class="span2">联系客服</span></a></li>
            <li id="li3"><a href=""><span class='span1 glyphicon glyphicon-qrcode'></span><span class="span2">App下载</span></a></li>

        </ul>
    </div>
    <%--侧边栏效果结束--%>
    <!-- 模态框开始-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div id="modalwidth" class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="border-bottom: 0px;">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="ture">
                        &times;
                    </button>
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-sm-6"><a id="loginC" href="#"> 登录</a></div>
                        <div class="col-sm-6"><a id="registerC" href="#"> 注册</a></div>
                    </div>
                    <div id="login">
                        <div style="margin-right: 218px;font-size: 30px;color: #4cae4c;"><strong>————</strong></div>
                        <form id="loginForm">
                            <div style=" font-size: 20px;  margin-top: 5px"> 用户名
                                <input type="text" name="Uname"/>
                            </div>
                            <div style="font-size: 20px;margin-top: 5px"> 密码&emsp;
                                <input type="password" name="passWord"/>
                            </div>
                            <br>
                            <input id="su" type="submit" value="登录" onclick="upload()" style="color: black;font-size: 18px;font-weight: 500"/>
                            <input id="et" type="button" value="取消" onclick="reset()" style="color: black;font-size: 18px;font-weight: 500"/>
                        </form>
                        <img src="images/modal.png"/>
                    </div>
                    <div id="register" hidden>
                        <div style="margin-left: 218px;font-size: 30px;color: #4cae4c;"><strong>————</strong></div>
                        <form action="AddUser" method="post" id="addUserform">
                            <table cellpadding="0px" cellspacing="0px">
                                <tr>
                                    <td>姓名</td>
                                    <td><input type="text" name="Uname" id="Uname"></td>
                                </tr>
                                <tr>
                                    <td>密码</td>
                                    <td><input type="password" name="passWord" id="passWord"></td>
                                </tr>
                                <tr>
                                    <td>确认密码</td>
                                    <td><input type="password" name="passWord_again" id="passWord_again"></td>
                                </tr>
                                <tr>
                                    <td>证件类型</td>
                                    <td>
                                        <div>
                                            <select name="idType">
                                                <option value="二代身份证">二代身份证</option>
                                                <option value="护照 ">护照</option>
                                                <option value="港澳通行证">港澳通行证</option>
                                            </select>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>证件号</td>
                                    <td><input type="text" name="idCard" id="idCard"></td>
                                </tr>
                                <tr>
                                    <td>手机号码</td>
                                    <td><input type="text" name="phone" id="phone"></td>
                                </tr>
                            </table>
                            <input id="en" type="submit" name="ensure" value="提交" style="color: black;font-size: 18px;font-weight: 500"/>
                            <input id="ex" type="button" name="exit" value="取消" onclick="reset()" style="color: black;font-size: 18px;font-weight: 500"/>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框结束-->
    <div class="container">
        <!--logo导航开始-->
        <div class="head">
            <a class="ht"><img src="images/logo.jpg"/></a>
            <div class="hs">
            <span><button type="button" class="btn btn-default btn-lg">
                            <a href="my.jsp"><span class="glyphicon glyphicon-user"></span></a>
                            </button>
                <button id="hb" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">登录/注册 </button>
            </span>
            </div>
        </div>
        <!--logo导航结束-->
        <!--导航列表开始-->
        <div class="navi-w">
            <div class="navi">
                <ul class="navi">
                    <li class="on">
                        <a href="index.jsp">首页</a>
                    </li>
                    <li>
                        <a href="queryBook.jsp" class="cta">查询订票</a>
                    </li>
                    <li>
                        <a href="#">出行向导</a>
                    </li>
                    <li>
                        <a href="my.jsp">个人中心</a>
                    </li>
                </ul>
            </div>
        </div>
        <!--导航列表结束-->

        <!--轮播开始-->
        <div id="myCarousel" class="carousel slide">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>

            <!-- 轮播体开始 -->
            <div id="item" class="carousel-inner ">
                <div class="item active">
                    <img src="images/index1.png" alt="First slide">
                </div>
                <div class="item">
                    <img src="images/index2.png" alt="Second slide">
                </div>
                <div class="item">
                    <img src="images/index3.png" alt="Third slide">
                </div>
            </div>
            <!--轮播体结束-->

            <!-- 轮播导航开始 -->
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
            <!--轮播导航结束-->
        </div>
        <!--轮播结束-->


        <div class="profoot">
            <a href="#">
                <img src="images/true2.png" class="img-circle"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#">
                <img src="images/true.jpg" class="img-circle"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#">
                <img src="images/true2.png" class="img-circle"></a>
        </div>

        <div class="foot">
            <p>
                <a href="#">关于我们 &nbsp;</a>|
                <a href="#">&nbsp;网站声明 </a>
            </p>
            <p>版权所有©2018 &nbsp; 计科普通一班 &nbsp;第五小组</p>
        </div>
    </div>
</div>
</body>
</html>